<template>
	<view class="pages_intelligence" :style="{paddingTop: `${search.height+search.top+10}px`}">
		<myTabs :title="title" :isTrue="isText || isText==0" @goBlack="goBlack" :mybackgroundColor="'#fff'"></myTabs>
		<view class="cityBox" :style="{top: `${search.height+search.top+10}px`}">
			<view class="cityHeard" id="cityHeard">
				<view class="cityHeard_title" v-if="!isText">请选择要您想了解的餐饮品类</view>
				<input @confirm="confirm" class="cityHeard_input" placeholder="品类搜索" />
			</view>

			<view class="indexListBox"
				:style="{height : `calc(100vh - ${search.height+search.top+10}px - ${contentHeight}px)`}">
				<view class="indexListBox_leftBox">
					<view @click="changIndex(index)" v-for="(item,index) in varietyArr"
						:class="listIndex[0] == index ? 'act' : ''" :key="index">{{item.label}}</view>
				</view>
				<view class="indexListBox_rightBox">
					<view @click="changIndex(listIndex[0],index)" v-for="(item,index) in varietyChildren"
						:class="listIndex[1] == index ? 'act' : ''" :key="index">
						<span>{{item.label}}</span>
						<image v-if="listIndex[1] == index" src="/static/img/activateIcon.png"></image>
					</view>
				</view>
			</view>

		</view>
		<view :class="listIndex[1]!=undefined? 'ensureButton' : 'noEnsureButton'" @click="ensure">
			确定选择
		</view>
	</view>

</template>

<script>
	import myTabs from "@/components/myTabs/index.vue"
	export default {
		components: {
			myTabs
		},
		data() {
			// varietyArr[listIndex[0]].
			return {
				listIndex: [0],
				contentHeight: 0,
				title: '餐饮品类选择',
				varietyArr: [],
				varietyChildren: [],
				isText: 0
			}
		},
		onLoad(options) {
			// #ifndef H5
			let search = uni.getMenuButtonBoundingClientRect()
			this.$store.commit('updataSearch', search);
			// #endif
			if (options) {
				this.isText = options.isText;
			}

			this.initVariety();
		},
		onReady() {
			const query = uni.createSelectorQuery().in(this);
			query.select("#cityHeard").boundingClientRect(data => {
				this.contentHeight = data.height;
			}).exec();
		},
		computed: {
			search() {
				return this.$store.state.search;
			}
		},
		methods: {
			ensure() {
				console.log('varietyChildren--->',this.varietyChildren)
				if(this.varietyArr.length==0||!this.varietyArr){
					uni.showToast({
						icon: 'none',
						title: '暂无餐饮品类',
						mask: true
					})
					return
				}
				if (this.listIndex[1] == 0 || this.listIndex[1]) {
					let variety = {
						label: this.varietyArr[this.listIndex[0]].label,
						id: this.varietyArr[this.listIndex[0]].id,
						children: [this.varietyChildren[this.listIndex[1]]]
					}
					uni.setStorageSync('variety', variety);
					uni.showToast({
						icon: 'none',
						title: '添加成功',
						mask: true
					})
					
						if(this.isText){
							setTimeout(() => {
							let pages = getCurrentPages();
							let prevPage = pages[pages.length - 2];
							
							prevPage.onShow(true);
							
							uni.navigateBack();
							}, 1000)
						}else{
							setTimeout(() => {
							uni.navigateTo({
								url: '/package/identity/index'
							})
							}, 1000)
						}
					
				} else {
					uni.showToast({
						icon: 'none',
						title: '请选择餐饮品类',
						mask: true
					})
				}
			},
			uzzyQuery(list, keyWord) {

				var reg = new RegExp(keyWord, 'ig');

				if (!keyWord) {
					return list;
				}
				var arr = [];

				for (var i = 0; i < list.length; i++) {
					let item = list[i].label
					if (reg.test(item)) {
						arr.push(list[i]);
					}
				}
				return arr;
			},
			confirm(e) {
				let value = e.detail.value.trim();
				this.listIndex = [0];
				let nowCityUrban = this.uzzyQuery(this.trueVarietyArr, value);
				console.log('nowCityUrban--->',nowCityUrban)
				this.varietyChildren = nowCityUrban[0].children ? nowCityUrban[0].children : [];
				this.varietyArr = nowCityUrban;
				console.log('this.varietyChildren', this.varietyChildren, nowCityUrban)

			},
			initVariety() {
				let location = uni.getStorageSync('location')
				let cityId = location.id;
				this.$api.getCategoryList({
					cityId
				}).then(res => {
					if (res.code == 200) {
						let variety = uni.getStorageSync('variety');
						let oneIndex = 0;
						let twoIndex = 0;
						this.trueVarietyArr = this.varietyArr = res.data;
						this.trueVarietyArr.forEach((item, index) => {
							if (item.id == variety.id) {
								oneIndex = index
							}
						});

						this.varietyChildren = this.varietyArr[oneIndex]&&this.varietyArr[oneIndex].children ? this.varietyArr[oneIndex]
							.children : [];
						console.log('this.varietyChildren',this.varietyChildren)
						let id = variety ? variety.children[0].id : "";
						

						this.varietyChildren.forEach((item, index) => {
							if (item.id == id) {
								twoIndex = index
							}
						});
						if (variety) {
							this.listIndex = [oneIndex, twoIndex];
						}


					}
				})
			},
			changIndex(oneIndex, twoIndex = undefined) {
				this.listIndex = [oneIndex, twoIndex];
				if (twoIndex === undefined) {
					this.varietyChildren = this.varietyArr[oneIndex].children ? this.varietyArr[oneIndex].children : [];
				}
			},
			goBlack() {
				uni.navigateBack();
			}
		}
	}
</script>
<style lang="scss" scoped>
	.pages_intelligence {
		background-color: #F0F0F0;
		min-height: 100vh;
		box-sizing: border-box;

		.ensureButton {
			width: 558rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #FFDA2D;
			opacity: 1;
			border-radius: 24rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #000000;
			text-align: center;
			margin: 48rpx auto;
			position: fixed;
			bottom: 0%;
			left: 50%;
			transform: translateX(-50%);
		}

		.noEnsureButton {
			width: 558rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #efefef;
			opacity: 1;
			border-radius: 24rpx;
			font-size: 28rpx;
			font-family: 蘋方-簡;
			font-weight: normal;
			color: #999;
			text-align: center;
			margin: 48rpx auto;
			position: fixed;
			bottom: 0%;
			left: 50%;
			transform: translateX(-50%);
		}

		.indexListBox {

			display: flex;
			border-top: 1rpx solid #CCCCCC;
			box-sizing: border-box;
		}

		.indexListBox_leftBox {
			height: 100%;
			overflow: scroll;
			flex: 0 0 350rpx;
			padding-bottom: 150rpx;
			box-sizing: border-box;
			background: #F7F7F7;

			view {
				width: 100%;
				height: 104rpx;
				line-height: 104rpx;
				background: #F7F7F7;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;
				padding-left: 32rpx;
				box-sizing: border-box;
			}

			.act {
				background: #fff;
				font-weight: bold;
				color: #333333;
			}
		}

		.indexListBox_rightBox {
			height: 100%;
			overflow: scroll;
			flex: 1;
			padding-bottom: 150rpx;
			box-sizing: border-box;
			background: #fff;

			view {
				width: 100%;
				height: 104rpx;
				line-height: 104rpx;
				background: #fff;

				color: #666666;
				padding: 0 32rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				span {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
				}

				image {
					width: 40rpx;
					height: 40rpx;
				}


			}

			.act {
				span {
					font-weight: bold;
					color: #333333;
				}

			}
		}

		// <view class="indexListBox" :style="{height : `calc(100vh - ${search.height+search.top+10}px - ${contentHeight}px)`}">
		// 	<view class="indexListBox_leftBox">
		// 		<view v-for="(item,index) in itemArr" :key="index">{{item.name}}</view>
		// 	</view>
		// 	<view class="indexListBox_rightBox">>
		// 		<view v-for="(item,index) in itemArr[listIndex[1]].arr" :key="index">{{item}}</view>
		// 	</view>
		// </view>
		/deep/.u-index-list {
			padding-bottom: 150rpx;
		}

		/deep/.u-index-list__letter {
			display: none;
		}

		/deep/.u-index-anchor {
			background-color: #f7f7f7 !important;
			color: #999999 !important;
		}

		/deep/.list-cell {
			background-color: #fff;
			height: 104rpx;
			line-height: 104rpx;
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;

		}

		.list-cell:not(:last-child) {
			&::after {
				content: '';
				width: 90%;
				height: 1rpx;
				background: #eaeaea;
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);

			}
		}

		/deep/.listAct {
			background-color: #fffbe9;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		/deep/.u-index-item {
			width: 100% !important;
			background: #fff;
		}

		/deep/.u-border-bottom {
			border: none !important;
		}

		.cityHeard_bottonBox {
			display: flex;
			justify-content: space-between;
		}

		.cityHeard_bottonBoxLeft {
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: #333333;
		}

		.cityHeard_bottonBoxRight {
			display: flex;
			align-content: center;

			span {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #333333;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.cityBox {
			position: absolute;
			left: 0;
			width: 100%;
		}

		.cityHeard {
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
			width: 100%;
			background-color: #fff;

		}

		.cityHeard_title {
			height: 50rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 50rpx;
			color: #000000;
		}

		.cityHeard_input {
			width: 686rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #f7f7f7;
			border: 2rpx solid #EFEFEF;
			opacity: 1;
			border-radius: 16rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #999;
			text-align: center;
			margin: 32rpx 0;
		}
	}
</style>
